<template>
  <div class="box">
    <!-- 头部搜索框 -->
    <van-search
      placeholder="输入搜索的商品名"
      v-model="keyword"
      shape="round"
      @click="$router.push('/search')"
    />
    <!-- 头部搜索框 -->
    <!-- 轮播图区域 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <!-- 轮播图区域 -->
    <!-- 分类区域 -->
    <van-tabs color="#0088dd" line-height="2" @click="changeTab">
      <van-tab
        v-for="(item, index) in cateList"
        :title="item.title"
        :name="item._id"
        :key="index"
      >
      </van-tab>
    </van-tabs>
    <!-- 分类区域 -->
    <!-- 排序的布局结构 -->
    <van-row>
      <van-col :span="3">综合</van-col>
      <van-col :span="3">价格</van-col>
      <van-col :span="3">销量</van-col>
      <van-col :span="5" @click="changeSort"
        >排序 <van-icon name="arrow-up" v-show="sort == 1" /><van-icon
          name="arrow-down"
          v-show="sort == 2"
      /></van-col>
    </van-row>
    <!-- 排序的布局结构 -->

    <gList :lists="lists" @addCart="cart"/>

    <!-- 底部弹框 -->
    <van-popup
      v-model="isShow"
      position="bottom"
      closeable
      close-icon-position="top-left"
      round
    >
      <div style="padding-top: 20px">
        <van-image :src="goodInfo.pic" />
        <p style="font-size: 15px">{{ goodInfo.title }}</p>
        <van-button type="primary" size="small" block @click="addCart"
          >确定</van-button
        >
      </div>
    </van-popup>
    <!-- 底部弹框 -->
    <!-- 返回顶部的小小按钮 -->
    <div class="toTop" v-show="toTop" @click="goTop">
      <van-icon name="arrow-up" />
    </div>
  </div>
</template>
<script>
import axios from "axios";
import gList from "./gList";
export default {
  name: "index",
  components:{
    gList,
  },
  data() {
    return {
      cateList: [], //分类
      goodsList: [], //商品列表
      isShow: false,
      goodInfo: {}, //存储选中商品的信息
      keyword: "", //模糊搜索的关键字
      cid: "", //当前选中的分类的_id的值

      sort: 0, //0无序，1升序  2降序
      toTop: false,
    };
  },
  computed: {
    lists() {
      // 把本地存储的数据直接赋值
      let goods = this.goodsList;
      //排序的功能
      if (this.sort != 0) {
        goods.sort((a, b) => {
          //比较每个商品的价格值
          return this.sort == 1 ? a.price - b.price : b.price - a.price;
        });
      }

      //判断如果分类id的值为空的话，直接返回数据
      if (this.cid == "") {
        return goods;
      }
      // 对分类的数据进行过滤
      goods = goods.filter((item) => {
        //判断商品分类id是否当前选中的分类id
        return item.cid == this.cid;
      });

      return goods;
    },
  },
  mounted() {
    this.getCate();
    this.getGoods();

    //监听滚动事件
    window.addEventListener("scroll", () => {
      //兼容性写法，获取html的元素
      let html = document.documentElement || document.body;
      console.log(html.scrollTop);
      //如果滚动高度大于1屏显示返回顶部的按钮
      if (html.scrollTop >= html.clientHeight) {
        this.toTop = true;
      } else {
        //否则隐藏
        this.toTop = false;
      }
    });
  },
  methods: {
    goTop() {
      //兼容性写法，获取html的元素
      let html = document.documentElement || document.body;
      //设置炜0，返回顶部
      html.scrollTop = 0;
    },
    //修改当前data洪排序的状态值
    changeSort() {
      if (this.sort == 1) {
        this.sort = 2;
      } else {
        this.sort = 1;
      }
    },
    //点击分类选项卡的时候触发的
    changeTab(name) {
      console.log(name);
      this.cid = name; //把当前选中的分类的值给到cid即可。
    },
    //加入购物车第一步弹框显示
    cart(item) {
      //显示弹框
      this.isShow = true;
      //把当前商品的嘻嘻你给到goodsInfo
      this.goodInfo = item;
    },
    //点击确定按钮，调用加入购物车的方法
    addCart() {
      //格式化goodsInfo的值。
      this.$set(this.goodInfo, "checked", true);
      this.$set(this.goodInfo, "num", 1);

      //调用vuex的数据，成功的信息提示
      this.$store.commit("addCart", this.goodInfo);
      this.$toast.success("加入购物车成功");

      //关闭弹框
      this.isShow = false;
    },
    //获取分类列表的方法
    getCate() {
      axios.get("/json/fenlei.json").then((res) => {
        console.log(res);
        this.cateList = res.data.result;
      });
    },

    //获取商品列表的方法
    getGoods() {
      axios.get("/json/list1.json").then((res) => {
        console.log(res);
        this.goodsList = res.data.result;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .van-grid {
    width: 100%;
    // margin-top: 20px;
    .title {
      font-size: 15px;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }
    .price {
      width: 100%;
      font-size: 16px;
      color: #a00000;
    }
  }
  .van-row {
    font-size: 14px;
    line-height: 40px;
    .van-col {
      text-align: center;
    }
  }
  .toTop {
    padding: 10px;
    border-radius: 50%;
    background: #f0f0f0;
    position: fixed;
    right: 10px;
    bottom: 80px;
    // transform: translateY(100%);
    // transition: all 0.8s ease;
  }
}
</style>